<template>
  <div
    id="account_look"
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{visibility: (visible?'visible':'hidden')}"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        {{title}}
        <div class="close" @click="cancel()"></div>
      </div>
      <div class="form2">
        <el-row :gutter="20">
          <el-col :span="8">
            <span style="color:#666666">登录账号：</span>
            {{accountData.username}}
          </el-col>
          <el-col :span="12">
            <span style="color:#666666">名&nbsp;&nbsp;&nbsp;称：</span>
            {{accountData.nickName}}
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <span style="color:#666666">所属机构：</span>
            {{accountData.orgName}}
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="accountData.roleMode >1">
          <el-col :span="22">
            <el-row :gutter="0">
              <el-col :span="3" style="width: 11.5%;">
                <span style="color:#666666">所属校区：</span>
              </el-col>
              <el-col :span="21">
                <el-tag
                  color="#F0F5FF"
                  :key="item"
                  v-for="item in accountData.campusNameList"
                >{{item}}</el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <span style="color:#666666">角&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色：</span>
            {{accountData.roleName}}
          </el-col>
          <el-col :span="8">
            <span style="color:#666666">创建人：</span>
            {{accountData.createUserName}}
          </el-col>
          <el-col :span="8">
            <span style="color:#666666">创建时间：</span>
            {{accountData.createTime}}
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" v-if="accountData.childRoleMode != null">
            <span style="color:#666666">管辖范围：</span>
            {{accountData.userPopedomName}}
          </el-col>
        </el-row>
      </div>
      <!-- <div class="form1">
        <div class="row row_5">
          <div class="label"></div>
          <div class="value_2"></div>

          <div class="label"></div>
          <div class="value"></div>
        </div>
        <div class="row row_7">
          <div class="value">{{accountData.roleName}}</div>

          <div class="label">创建人：</div>
          <div class="value">{{accountData.createUserName}}</div>
        </div>
        <div class="row row_6">
          <div class="label">创建时间：</div>
          <div class="value">{{accountData.createTime}}</div>

          <div class="label" v-if="accountData.childRoleMode != null">管辖范围：</div>
          <div
            class="value"
            v-if="accountData.childRoleMode != null"
          >{{accountData.userPopedomName}}</div>
        </div>
      </div>-->
      <!-- <div class="line_from"></div>
      <el-row class="tree">
        <span style="font-size:16px;color:#666666;">选择的角色权限列表</span>
        <el-row style="margin-top: 0.2rem;" v-if="!isAdmin">
          <el-col :span="24">
            <div class="grid-content bg-purple">菜单名称</div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 0.2rem;" v-else>
          <el-col :span="16">
            <div class="grid-content bg-purple">菜单名称</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">类型</div>
          </el-col>
        </el-row>
        <el-tree
          ref="tree"
          class="tree"
          :data="sysRoledata"
          :props="defaultProps"
          show-checkbox
          node-key="menuId"
          :default-expanded-keys="accountData.menuIds"
          :default-checked-keys="accountData.menuIds"
          check-strictly
          :render-content="renderContent"
        ></el-tree>
      </el-row>-->
    </div>
  </div>
</template>

<script>
var vm;
var user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdmin: false,
      title: "",
      accountData: {},
      sysRoledata: [],
      roleList: [],
      orgList: [],
      campusList: [],
      defaultProps: {
        children: "list",
        label: "name"
      }
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 1);
      console.log(data);
      vm.isAdmin = user.roleMode == 0;
      vm.title = "查看账号";
      vm.accountData = data;
      vm.accountData.menuIds = [];
      vm.accountData.campusId = []; //campusId
      vm.accountData.campusName = "";
      // if (vm.accountData.campusList.length > 0) {
      //   for (let i = 0; i < vm.accountData.campusList.length; i++) {
      //     if (vm.accountData.campusName == "") {
      //       vm.accountData.campusName += vm.accountData.campusList[i].name;
      //     } else {
      //       vm.accountData.campusName +=
      //         "," + vm.accountData.campusList[i].name;
      //     }
      //   }
      // }
      // vm.accountData.orgListName = "";
      // let accountOrgList = [];
      // if (vm.accountData.userCampusList.length > 0) {
      //   for (let i = 0; i < vm.accountData.userCampusList.length; i++) {
      //     if (vm.accountData.userCampusList[i].campusName != null) {
      //       vm.accountData.campusName +=
      //         vm.accountData.campusName != ""
      //           ? "," + vm.accountData.userCampusList[i].campusName
      //           : vm.accountData.userCampusList[i].campusName;
      //     }
      //   }
      // }
      vm.accountData.userPopedomName = "";
      if (vm.accountData.userPopedomList.length > 0) {
        for (let i = 0; i < vm.accountData.userPopedomList.length; i++) {
          if (vm.accountData.userPopedomName == "") {
            vm.accountData.userPopedomName +=
              vm.accountData.userPopedomList[i].popedomName;
          } else {
            vm.accountData.userPopedomName +=
              "," + vm.accountData.userPopedomList[i].popedomName;
          }
        }
      } else {
        if (vm.accountData.childRoleMode == 1) {
          vm.accountData.userPopedomName = "全部";
        }
      }

      let paras = {};
      paras.roleId = vm.accountData.roleId;
      api.selectRoleMenus(paras).then(function(data) {
        if (data.result == "操作成功") {
          let roleListTemp = data.list;
          vm.sysRoledata = data.list;
          vm.getList();
          vm.getMenuIds(roleListTemp);
        }
      });
    },
    getMenuIds(sysRoledata) {
      let menuIds = [];
      for (let i = 0; i < sysRoledata.length; i++) {
        menuIds.push(sysRoledata[i].menuId);
        let oneSysRoleData = sysRoledata[i];
        if (oneSysRoleData.list != null && oneSysRoleData.list.length > 0) {
          for (let a = 0; a < oneSysRoleData.list.length; a++) {
            menuIds.push(oneSysRoleData.list[a].menuId);
            let twoSysRoleData = oneSysRoleData.list[a];
            if (twoSysRoleData.list != null && twoSysRoleData.list.length > 0) {
              for (let b = 0; b < twoSysRoleData.list.length; b++) {
                menuIds.push(twoSysRoleData.list[b].menuId);
                let threeSysRoleData = twoSysRoleData.list[b];
                if (
                  threeSysRoleData.list != null &&
                  threeSysRoleData.list.length > 0
                ) {
                  for (let c = 0; c < threeSysRoleData.list.length; c++) {
                    menuIds.push(threeSysRoleData.list[c].menuId);
                  }
                }
              }
            }
          }
        }
      }
      vm.accountData.menuIds = menuIds;
    },
    getList() {
      for (let i = 0; i < this.sysRoledata.length; i++) {
        this.sysRoledata[i].disabled = true;
        let oneSysRoleData = this.sysRoledata[i];
        if (oneSysRoleData.list != null && oneSysRoleData.list.length > 0) {
          for (let a = 0; a < oneSysRoleData.list.length; a++) {
            oneSysRoleData.list[a].disabled = true;
            let twoSysRoleData = oneSysRoleData.list[a];
            if (twoSysRoleData.list != null && twoSysRoleData.list.length > 0) {
              for (let b = 0; b < twoSysRoleData.list.length; b++) {
                twoSysRoleData.list[b].disabled = true;
                let threeSysRoleData = twoSysRoleData.list[b];
                if (
                  threeSysRoleData.list != null &&
                  threeSysRoleData.list.length > 0
                ) {
                  for (let c = 0; c < threeSysRoleData.list.length; c++) {
                    threeSysRoleData.list[c].disabled = true;
                  }
                }
              }
            }
          }
        }
      }
    },
    renderContent(h, { node, data, store }) {
      var systype = "";
      var str = "";
      if (data.type == 0) {
        systype = "导航";
        str = "background: #409EFF;border-radius: 5px;padding:0.01rem 0.04rem";
      } else if (data.type == 1) {
        systype = "页面";
        str = "background: #67C23A;border-radius: 5px;padding:0.01rem 0.04rem";
      } else {
        systype = "接口";
        str = "background: #E6A23C;border-radius: 5px;padding:0.01rem 0.04rem";
      }

      if (user.roleMode == 0) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between;">
            <span>
              <span>{node.label}</span>
            </span>
            <span style="width:2.6rem;text-align: center;">
              <span style={str}>{systype}</span>
            </span>
          </span>
        );
      } else {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between;">
            <span>
              <span>{node.label}</span>
            </span>
          </span>
        );
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 10rem;
}
.el-tag {
  border-color: #abc9f6;
  height: 0.38rem;
  line-height: 0.36rem;
  font-size: 0.14rem;
  color: #333333;
  margin-right: 0.06rem;
  margin-bottom: 0.03rem;
}
.form2 {
  padding: 0.1rem 0.2rem 0.3rem 0.3rem;
  line-height: 0.4rem;
}
</style>
